<template>
    <transition name="slider">
        <div class="shop">
            <m-header :search=true :titleText=titleText @search='goSearch'></m-header>
            <div class="shop-box" ref="shopbox">
                <scroll class="wrapper">
                    <div>
                        <div class="s-b-t">
                            <router-link class="item" :to="{path:'/shop/about',query:{type:1}}" tag="div">
                                <div class="icon score"></div>
                                <p>积分获取</p>
                            </router-link>
                            <router-link class="item" to="/shop/exchangerank" tag="div">
                                <div class="icon rank"></div>
                                <p>兑换排行</p>
                            </router-link>
                            <router-link class="item" :to="{path:'/shop/about',query:{type:2}}" tag="div">
                                <div class="icon about"></div>
                                <p>关于兑换</p>
                            </router-link>
                        </div>
                        <div class="shop-info">
                            <div class="exchange" v-show="hot.length">
                                <div class="title">热门兑换</div>
                                <div class="box">
                                    <div class="item" v-for="(item,index) in hot" :key=index @click="goDetail(item.id)">
                                        <img :src="item.image" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="exchange" v-show="solid.length">
                                <div class="title">礼包兑换</div>
                                <div class="box">
                                    <div class="item" v-for="(item,index) in solid" :key=index @click="goDetail(item.id)">
                                        <img :src="item.image" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="exchange" v-show="virtual.length">
                                <div class="title">礼包兑换</div>
                                <div class="box">
                                    <div class="item" v-for="(item,index) in virtual" :key=index @click="goDetail(item.id)">
                                        <img :src="item.image" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </scroll>

            </div>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
    </transition>

</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header';
import Loading from '@/base/loading/loading';
import Scroll from '@/base/scroll/scroll';
import { getCommonInfo } from '@/base/api/indexpage/getindexinfo';
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            canSlider: true,
            gameType: {},
            isloading: true,
            titleText: '商城',
            hot: [],
            solid: [],
            virtual: [],
        };
    },
    created() {
        this._getShopIndexInfo();
    },
    mounted() {
        this.$refs.shopbox.style.top = (44 + parseInt(this.statusbar)) + 'px';
    },
    methods: {
        _getShopIndexInfo() {
            const path = '/shop/index';
            getCommonInfo(path).then((res) => {
                console.log(res);
                this.hot = res.hot;
                this.solid = res.solid;
                this.virtual = res.virtual;
            });
        },
        onSearchPackage(val) {
            console.log(val);
        },
        goSearch() {
            this.$router.push('/shop/search');
        },
        goDetail(id) {
            this.$router.push({
                path: `shop/detail/${id}`,
                params: {
                    id,
                },
            });
        },
    },
    computed: {
        ...mapGetters(['statusbar']),
    },
    components: {
        MHeader,
        Loading,
        Scroll,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.shop {
    position: fixed;
    top: 0;
    bottom: 50px;
    width: 100%;
    background: #ffffff;

    .shop-box {
        position: fixed;
        top: 44px;
        bottom: 50px;
        width: 100%;
        background: #ffffff;

        .wrapper {
            height: 100%;
            overflow: hidden;

            .s-b-t {
                display: flex;
                height: 100px;
                box-shadow: 0px 2px 2px #cccccc;
                border-top: 1px solid #eeeeee;

                .item {
                    flex: 1;
                    height: 100%;
                    border-right: 1px solid #eeeeee;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    &:last-child {
                        border: none;
                    }

                    .icon {
                        width: 36px;
                        height: 36px;
                        background-size: 36px 36px;

                        &.score {
                            bg-image('jifen');
                        }

                        &.rank {
                            bg-image('guanyuduihuan');
                        }

                        &.about {
                            bg-image('duihuanpaihang');
                        }
                    }

                    p {
                        color: #222222;
                        font-size: $font-size-small;
                        margin-top: 15px;
                    }
                }
            }

            .shop-info {
                padding: 0 15px;
                box-sizing: border-box;

                .exchange {
                    .title {
                        font-size: $font-size-medium-x;
                        line-height: 50px;
                    }

                    .box {
                        display: flex;
                        flex-wrap: wrap;

                        .item {
                            width: 48%;
                            min-height: 90px;
                            margin-left: 4%;
                            margin-top: 10px;
                            background: #eeeeee;
                            box-sizing: border-box;

                            img {
                                width: 100%;
                            }

                            &:nth-child(2n+1) {
                                margin-left: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
